<template>
    <el-container id="container">
        <el-header id="header">
            <div class="left_box">
                <span>北部湾保险系统后台-管理员端</span>
            </div>
            <div class="right_box">
                <el-dropdown>
                    <span class="el-dropdown-link">
                        个人中心<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                            <div @click="logout">登出</div>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-header>
        <el-container>
            <!--侧边栏-->
            <el-aside>
                <!--菜单导航栏 router开启路由跳转-->
                <el-col :span="12">
                    <el-menu
                            default-active="/file"
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose"
                            v-bind:router="true">
                        <el-menu-item index="/file">
                            <i class="el-icon-folder-opened"></i>
                            <span slot="title">文件管理</span>
                        </el-menu-item>
                        <el-menu-item index="/kefu">
                            <i class="el-icon-user"></i>
                            <span slot="title">客服账号管理</span>
                        </el-menu-item>
                        <el-menu-item index="/message">
                            <i class="el-icon-document-copy"></i>
                            <span slot="title">公告管理</span>
                        </el-menu-item>
						<el-menu-item index="/combined">
						    <i class="el-icon-pie-chart"></i>
						    <span slot="title">保险商品管理</span>
						</el-menu-item>
                        <el-menu-item index="/jifengoods">
                            <i class="el-icon-s-marketing"></i>
                            <span slot="title">积分商品管理</span>
                        </el-menu-item>
                        <!--                        <el-menu-item index="/accountManage">
                                                    <i class="el-icon-user"></i>
                                                    <span slot="title">账号管理</span>
                                                </el-menu-item>
                                                <el-menu-item index="/submitManage">
                                                    <i class="el-icon-dish"></i>
                                                    <span slot="title">打卡管理</span>
                                                </el-menu-item>
                                                <el-menu-item index="/submitManagePagination">
                                                    <i class="el-icon-dish"></i>
                                                    <span slot="title">打卡数据后端分页</span>
                                                </el-menu-item>-->
                    </el-menu>
                </el-col>
            </el-aside>
            <!--主视图-->
            <el-main>
                <!--子路由视图-->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    name: "Home",
    mounted() {

    },
    created() {
        //在页面加载时读取sessionStorage里的状态信息
        if (sessionStorage.getItem("store") ) {
            this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
        }
        //在页面刷新时将vuex里的信息保存到sessionStorage里
        window.addEventListener("beforeunload",()=>{
            sessionStorage.setItem("store",JSON.stringify(this.$store.state))
        })
    },
    data(){
        return{

        }
    },
    methods:{
        logout(){
            var vm = this;
            vm.axios({
                url: '/myapi/logout',
                method: 'get'
            }).then(function (response) {
                if(response.data.code===200 && response.data.message==="注销成功"){
                    vm.$router.push("/adminLogin")
                }
            });
            vm.$router.push("/")
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    }

}
</script>

<style scoped>
#container{
    height: 100%;
}

#header{
    display: flex;
    justify-content: space-between;
    background-color: #162332;
    color: #f8f1f1;
    text-align: center;
    line-height: 60px;
    align-items: center;
}

.left_box{
    margin-left: 15px;
    font-size: 20px;
}

.right_box{
    margin-right: 15px;
    font-size: 20px;
}

</style>
